Angular Material একটি শক্তিশালী থিমিং সিস্টেম সরবরাহ করে, যা অ্যাপ্লিকেশনের রং এবং স্টাইল কাস্টমাইজ করতে ব্যবহৃত হয়। এটি ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে Primary, Accent, এবং Warn রঙের প্যালেট ব্যবহার করে থিম তৈরি করার সুবিধা দেয়। Angular Material এর থিমিং সিস্টেম CSS এর পরিবর্তে SCSS (Sassy CSS) ভিত্তিক।

থিমিংয়ের মূল উপাদান

Angular Material এর থিম তৈরি করার জন্য নিম্নলিখিত উপাদানগুলো গুরুত্বপূর্ণ:

• Primary Palette: অ্যাপ্লিকেশনের প্রধান রং (যেমন টুলবার, বাটন)।
• Accent Palette: অ্যাপ্লিকেশনের হাইলাইট রং (যেমন টগল বাটন, স্লাইডার)।
• Warn Palette: ত্রুটি বা সতর্কীকরণের জন্য ব্যবহৃত রং।
• Background Palette: অ্যাপ্লিকেশনের ব্যাকগ্রাউন্ড রং।

প্রি-বিল্ট থিম

Angular Material প্রি-বিল্ট থিম সরবরাহ করে, যা আপনি সরাসরি ব্যবহার করতে পারেন। এগুলো হলো:

• Indigo/Pink (ডিফল্ট থিম)
• Deep Purple/Amber
• Pink/Blue Grey
• Purple/Green

আপনার প্রজেক্টে প্রি-বিল্ট থিম যোগ করতে angular.json ফাইলের styles সেকশনে থিম ফাইলটি উল্লেখ করুন:

"styles": [
  "src/styles.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

কাস্টম থিম তৈরি করা

Angular Material এর থিম কাস্টমাইজ করতে হলে আপনাকে একটি SCSS ফাইল ব্যবহার করতে হবে। নিচে কাস্টম থিম তৈরি করার ধাপগুলো উল্লেখ করা হলো:

১. SCSS ফাইল তৈরি করা

আপনার অ্যাপ্লিকেশনের src ফোল্ডারে একটি styles.scss ফাইল তৈরি করুন।

২. Angular Material থিমিং মডিউল ইমপোর্ট করা

SCSS ফাইলে Angular Material থিমিং ফাংশন এবং মিক্সইন ইমপোর্ট করুন:

@import '~@angular/material/theming';

৩. রঙের প্যালেট তৈরি করা

প্রয়োজনীয় Primary, Accent, এবং Warn রঙের প্যালেট তৈরি করুন:

// ম্যাটেরিয়াল প্যালেট ইমপোর্ট
@include mat-core();

// Primary রং নির্ধারণ
$primary: mat-palette($mat-indigo);

// Accent রং নির্ধারণ
$accent: mat-palette($mat-pink);

// Warn রং নির্ধারণ
$warn: mat-palette($mat-red);

৪. থিম তৈরি করা

প্যালেট ব্যবহার করে থিম তৈরি করুন:

$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));

৫. থিম অ্যাপ্লাই করা

Angular Material এর থিম অ্যাপ্লাই করতে থিমিং মিক্সইন ব্যবহার করুন:

@include angular-material-theme($theme);

৬. angular.json এ SCSS ফাইল যোগ করা

থিম ফাইল অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে angular.json ফাইলের styles সেকশনে যোগ করুন:

"styles": [
  "src/styles.scss"
]

ডার্ক থিম তৈরি করা

Angular Material ডার্ক থিম তৈরি করার জন্য mat-dark-theme মিক্সইন ব্যবহার করতে হবে। উদাহরণস্বরূপ:

$dark-theme: mat-dark-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));

@include angular-material-theme($dark-theme);

মাল্টিপল থিম সাপোর্ট

আপনার অ্যাপ্লিকেশনে একাধিক থিম যোগ করতে চাইলে থিমগুলোর জন্য আলাদা CSS ক্লাস তৈরি করুন:

.dark-theme {
  @include angular-material-theme($dark-theme);
}

.light-theme {
  @include angular-material-theme($theme);
}

তারপর HTML এ ক্লাস ডাইনামিকভাবে প্রয়োগ করে থিম পরিবর্তন করতে পারেন।

থিম কাস্টমাইজেশন সুবিধা

Angular Material এর থিমিং সিস্টেমের মাধ্যমে:

• অ্যাপ্লিকেশনের জন্য ব্র্যান্ড রং নির্ধারণ করা যায়।
• সহজে রং পরিবর্তন এবং থিমের সামগ্রিক স্টাইল পরিবর্তন করা সম্ভব।
• ডার্ক এবং লাইট মোডের সমর্থন প্রদান করা যায়।

Angular Material থিমিং সিস্টেম অ্যাপ্লিকেশনকে আরও আধুনিক, রেসপন্সিভ এবং ব্র্যান্ডিং এর সাথে সামঞ্জস্যপূর্ণ করে তোলে।

Material Theming হলো Angular Material এর একটি বৈশিষ্ট্য, যা ব্যবহারকারীদের তাদের অ্যাপ্লিকেশনের জন্য কাস্টম থিম তৈরি করতে দেয়। এটি Material Design এর উপর ভিত্তি করে তৈরি করা হয়, যা একটি আধুনিক ডিজাইন গাইডলাইন হিসেবে ব্যবহৃত হয়। Material Theming এর মাধ্যমে ডেভেলপাররা সহজেই তাদের অ্যাপ্লিকেশনের জন্য রং, টাইপোগ্রাফি, এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।

Angular Material এর থিমিং সিস্টেমের মূল লক্ষ্য হলো একটি প্রিলিমিনারি থিম সেট করে ডেভেলপারদের কম সময়ে এবং সহজে UI কাস্টমাইজ করার সুযোগ প্রদান করা। Material Theming মূলত primary, accent, এবং warn রঙের প্যালেটের মাধ্যমে অ্যাপ্লিকেশনের স্টাইল নির্ধারণ করে। এটি অ্যাপ্লিকেশনের বিভিন্ন উপাদানের রং ও স্টাইল কাস্টমাইজ করতে সহায়ক।

Material Theming এর মূল উপাদান

1. Primary Palette: অ্যাপ্লিকেশনের প্রধান রং, যা অ্যাপ্লিকেশনের মূল উপাদানগুলির জন্য ব্যবহৃত হয় (যেমন, টুলবার, বাটন, লিংক)।
2. Accent Palette: অ্যাপ্লিকেশনের হাইলাইট রং, যা বিশেষ উপাদান বা ফিচার (যেমন, স্লাইডার, টগল বাটন) প্রদর্শন করার জন্য ব্যবহৃত হয়।
3. Warn Palette: ত্রুটি বা সতর্কীকরণের জন্য ব্যবহৃত রং, যেমন red।
4. Background Palette: অ্যাপ্লিকেশনের ব্যাকগ্রাউন্ড রং।

Material Theming ব্যবহার করার সুবিধা

• ডিজাইন একীভূততা: Material Theming ব্যবহার করে অ্যাপ্লিকেশনের প্রতিটি উপাদানকে একটি একক থিমের আওতায় নিয়ে আসা সম্ভব হয়, যা ডিজাইনের সামঞ্জস্য বজায় রাখে।
• কাস্টমাইজেশন: Material Theming এর মাধ্যমে আপনি রং, টাইপোগ্রাফি, আইকন এবং অন্যান্য ডিজাইন উপাদান কাস্টমাইজ করতে পারেন, যা অ্যাপ্লিকেশনের বৈশিষ্ট্য এবং ব্র্যান্ডিংয়ের সাথে মেলে।
• রেসপন্সিভ ডিজাইন: এটি রেসপন্সিভ ডিজাইনের সুবিধা প্রদান করে, যা বিভিন্ন ডিভাইসে অ্যাপ্লিকেশন ঠিকভাবে প্রদর্শিত হতে সাহায্য করে।
• সহজ ইমপ্লিমেন্টেশন: Angular Material থিমিং সিস্টেমের মাধ্যমে কাস্টম থিম তৈরি করা এবং প্রয়োগ করা খুব সহজ এবং দ্রুত।

Material Theming এর প্রধান উপাদান

১. রঙের প্যালেট (Color Palettes)

Material Theming এ রঙের প্যালেট হলো আপনার অ্যাপ্লিকেশনের বিভিন্ন উপাদানের জন্য ব্যবহার করা প্রধান রং। Angular Material mat-palette ফাংশন ব্যবহার করে আপনি একটি রঙের প্যালেট তৈরি করতে পারেন। এর মাধ্যমে প্রধান (Primary), হাইলাইট (Accent), এবং সতর্ক (Warn) রঙ নির্ধারণ করা যায়।

$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink);
$warn: mat-palette($mat-red);

২. টাইপোগ্রাফি (Typography)

Material Theming সিস্টেমে টাইপোগ্রাফি থিমের অংশ হিসেবে কাস্টমাইজ করা যায়। Angular Material এর ডিফল্ট টাইপোগ্রাফি সিস্টেম ব্যবহার করা যায়, অথবা আপনি এটি কাস্টমাইজও করতে পারেন।

$typography: mat-typography-config();
@include angular-material-typography($typography);

৩. গ্লোবাল স্টাইল (Global Styles)

Material Theming ব্যবহার করার সময় অ্যাপ্লিকেশনের জন্য গ্লোবাল স্টাইল কাস্টমাইজ করা সম্ভব। যেমন, আপনি স্নিগ্ধ স্টাইল ব্যবহার করতে পারেন যা পুরো অ্যাপ্লিকেশনে প্রভাব ফেলবে।

@include mat-core();
@include angular-material-theme($theme);

কাস্টম থিম তৈরি করা

Angular Material এর থিম কাস্টমাইজ করার জন্য SCSS ফাইল ব্যবহার করতে হয়। এটি খুবই সহজ এবং ব্যবহারকারীর পছন্দ অনুযায়ী কাস্টম থিম তৈরি করা যায়। নিচে একটি কাস্টম থিম তৈরির উদাহরণ দেয়া হলো:

@import '~@angular/material/theming';

// Primary এবং Accent রং নির্ধারণ
$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-orange);

// কাস্টম থিম তৈরি করা
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
  ),
));

// থিম অ্যাপ্লাই করা
@include angular-material-theme($theme);

Material Theming এর মাধ্যমে Angular অ্যাপ্লিকেশনগুলোর জন্য কাস্টম থিম তৈরি করা সহজ এবং তা ব্যবহারকারী অভিজ্ঞতা উন্নত করতে সহায়ক। এটি অ্যাপ্লিকেশনের স্টাইলকে মানানসই এবং ইউনিফর্ম করে, এবং ডেভেলপারদের কাছে একটি শক্তিশালী কাস্টমাইজেশন টুল সরবরাহ করে। Material Theming ব্যবহার করে আপনি একটি সুন্দর এবং আধুনিক ডিজাইন তৈরি করতে পারবেন, যা আপনার অ্যাপ্লিকেশনের ব্র্যান্ডিং এবং ইউজার ইন্টারফেসের সাথে পুরোপুরি মেলে।

Angular Material এর মধ্যে কিছু পূর্বনির্ধারিত (pre-built) থিম রয়েছে, যা ডেভেলপারদের দ্রুত এবং সহজে ম্যাটেরিয়াল ডিজাইন প্রিন্সিপল অনুসারে অ্যাপ্লিকেশন ডিজাইন করতে সাহায্য করে। এই থিমগুলো মূলত বিভিন্ন রঙের প্যালেট এবং স্টাইল শিটের সংমিশ্রণ, যা অ্যাপ্লিকেশনের জন্য সুন্দর এবং সঙ্গতিপূর্ণ ডিজাইন তৈরি করে।

পূর্বনির্ধারিত Material থিমের তালিকা

Angular Material-এ নিম্নলিখিত পূর্বনির্ধারিত থিমগুলোর মধ্যে নির্বাচন করতে পারেন:

1. Indigo/Pink (ডিফল্ট থিম)
   • এটি হল Angular Material এর ডিফল্ট থিম, যা নীল (Indigo) এবং গোলাপি (Pink) রঙের প্যালেট ব্যবহার করে। এটি বেশিরভাগ অ্যাপ্লিকেশনের জন্য উপযুক্ত এবং আধুনিক ডিজাইন প্রদান করে।
   • থিম ফাইল: node_modules/@angular/material/prebuilt-themes/indigo-pink.css
2. Deep Purple/Amber
   • এই থিমটি গভীর বেগুনি (Deep Purple) এবং অ্যাম্বার (Amber) রঙের প্যালেট ব্যবহার করে। এটি কিছুটা গা dark ় এবং উজ্জ্বল রঙের সংমিশ্রণ, যা একটি প্রাণবন্ত এবং আধুনিক ফিল দেয়।
   • থিম ফাইল: node_modules/@angular/material/prebuilt-themes/deep-purple-amber.css
3. Pink/Blue Grey
   • এই থিমটি গোলাপি (Pink) এবং নীল ধূসর (Blue Grey) রঙের প্যালেট ব্যবহার করে। এটি কিছুটা শান্ত এবং নরম রঙের সংমিশ্রণ, যা নিরপেক্ষ এবং স্টাইলিশ অ্যাপ্লিকেশন ডিজাইনের জন্য আদর্শ।
   • থিম ফাইল: node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css
4. Purple/Green
   • এই থিমটি বেগুনি (Purple) এবং সবুজ (Green) রঙের প্যালেট ব্যবহার করে, যা একটি দৃষ্টিনন্দন এবং প্রাকৃতিক লুক তৈরি করে। এটি পরিবেশবান্ধব বা স্বাস্থ্য সম্পর্কিত অ্যাপ্লিকেশনের জন্য আদর্শ হতে পারে।
   • থিম ফাইল: node_modules/@angular/material/prebuilt-themes/purple-green.css

পূর্বনির্ধারিত থিম ব্যবহার করা

পূর্বনির্ধারিত থিম ব্যবহার করতে, আপনাকে angular.json ফাইলে থিমের CSS ফাইলটি যোগ করতে হবে। নিচে এর উদাহরণ দেওয়া হলো:

1. angular.json ফাইলে থিম যোগ করা:

"styles": [
  "src/styles.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

এখানে আপনি যেকোনো পূর্বনির্ধারিত থিম নির্বাচন করতে পারেন, যেমন:

• "node_modules/@angular/material/prebuilt-themes/deep-purple-amber.css"
• "node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css"
• "node_modules/@angular/material/prebuilt-themes/purple-green.css"

পূর্বনির্ধারিত থিমের সুবিধা

• দ্রুত অ্যাপ্লিকেশন ডেভেলপমেন্ট: আপনি যদি একটি নির্দিষ্ট ডিজাইন বা থিম চান, তবে পূর্বনির্ধারিত থিম ব্যবহার করা খুবই সহজ এবং দ্রুত। এতে সময় বাঁচে এবং ডিজাইন প্রক্রিয়া ত্বরান্বিত হয়।
• একক ডিজাইন প্যাটার্ন: প্রতিটি থিমই ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে, ফলে একটি সঙ্গতিপূর্ণ এবং প্রফেশনাল ডিজাইন পাওয়া যায়।
• কাস্টম থিমের জন্য বেস: পূর্বনির্ধারিত থিমের রঙ এবং স্টাইল কাস্টমাইজ করা সহজ, যাতে আপনার নিজস্ব ব্র্যান্ডিং এবং ডিজাইনের সাথে মিলিয়ে পরিবর্তন করা যায়।

Angular Material এর পূর্বনির্ধারিত থিমগুলো ডেভেলপারদের জন্য একটি শক্তিশালী এবং সুবিধাজনক টুল, যা দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সাহায্য করে। আপনি আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় থিমটি বেছে নিতে পারেন এবং সেটি সহজেই অ্যাপ্লিকেশনে প্রয়োগ করতে পারেন।

Angular Material আপনাকে কাস্টম থিম তৈরি করার সুবিধা প্রদান করে, যা অ্যাপ্লিকেশনের ডিজাইন এবং ব্র্যান্ডিংয়ের জন্য বিশেষভাবে উপযোগী। কাস্টম থিম তৈরি করার মাধ্যমে আপনি অ্যাপ্লিকেশনের রঙ, টাইপোগ্রাফি এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।

এটি করতে SCSS (Sassy CSS) ফাইল ব্যবহার করতে হয়, যা Angular Material এর থিমিং সিস্টেমের অংশ। কাস্টম থিম তৈরি করার জন্য আপনাকে primary, accent, এবং warn প্যালেট কনফিগার করতে হবে, এবং তারপর তা আপনার অ্যাপ্লিকেশন জুড়ে প্রয়োগ করতে হবে।

কাস্টম থিম তৈরি করার ধাপসমূহ

১. SCSS ফাইল তৈরি করা

প্রথমে আপনার প্রজেক্টে একটি SCSS ফাইল তৈরি করতে হবে। সাধারণত, src/styles.scss ফাইল ব্যবহার করা হয়। এটি আপনার থিমের মূল ফাইল হবে।

২. Material Theming SCSS মিক্সইন ইমপোর্ট করা

Angular Material এর থিমিং ফিচার ব্যবহার করতে @angular/material/theming প্যাকেজ থেকে থিমিং মিক্সইন এবং ফাংশন ইমপোর্ট করতে হয়।

@import '~@angular/material/theming';

৩. রঙের প্যালেট কনফিগার করা

প্রথমে আপনি আপনার কাস্টম primary, accent, এবং warn রঙের প্যালেট তৈরি করতে পারেন। Angular Material এর আগে থেকে থাকা রঙের প্যালেট যেমন $mat-indigo, $mat-pink, $mat-blue ব্যবহার করা যায়, অথবা আপনি নতুন রঙও সংজ্ঞায়িত করতে পারেন।

// Primary রঙের প্যালেট
$primary: mat-palette($mat-indigo);

// Accent রঙের প্যালেট
$accent: mat-palette($mat-pink);

// Warn রঙের প্যালেট
$warn: mat-palette($mat-red);

৪. কাস্টম থিম তৈরি করা

এখন আপনার কাস্টম থিম তৈরি করতে, উপরের প্যালেটগুলো ব্যবহার করে mat-light-theme অথবা mat-dark-theme মিক্সইন ব্যবহার করতে হবে। এই থিমটি আপনার অ্যাপ্লিকেশনের জন্য স্টাইল ও রঙ নির্ধারণ করবে।

// কাস্টম থিম তৈরি
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  ),
));

এছাড়া, আপনি যদি dark theme তৈরি করতে চান, তাহলে mat-dark-theme মিক্সইন ব্যবহার করতে পারেন:

$dark-theme: mat-dark-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  ),
));

৫. থিম অ্যাপ্লাই করা

এখন তৈরি করা থিমটি আপনার অ্যাপ্লিকেশনে অ্যাপ্লাই করতে হবে। এর জন্য angular-material-theme মিক্সইন ব্যবহার করতে হবে:

// থিম অ্যাপ্লাই করা
@include angular-material-theme($theme);

অথবা, ডার্ক থিমের জন্য:

// ডার্ক থিম অ্যাপ্লাই করা
@include angular-material-theme($dark-theme);

৬. angular.json ফাইলে SCSS ফাইল যোগ করা

এখন SCSS ফাইলটি আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে হবে। angular.json ফাইলের styles সেকশনে SCSS ফাইলটি যোগ করুন:

"styles": [
  "src/styles.scss"
]

কাস্টম থিমের উন্নত কাস্টমাইজেশন

১. টাইপোগ্রাফি কাস্টমাইজ করা

Angular Material এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের টাইপোগ্রাফি (ফন্ট এবং আকার) কাস্টমাইজ করতে পারেন। এর জন্য mat-typography-config ফাংশন ব্যবহার করা হয়।

// কাস্টম টাইপোগ্রাফি কনফিগারেশন
$typography: mat-typography-config();
@include angular-material-typography($typography);

২. অতিরিক্ত রং কাস্টমাইজ করা

আপনি যদি আরো রং যোগ করতে চান, তাহলে সেই রঙের প্যালেট তৈরি করতে পারেন এবং তা ব্যবহার করতে পারেন:

// নতুন রং যোগ করা
$custom: mat-palette($mat-teal);

// কাস্টম থিমে রঙ যোগ করা
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    custom: $custom
  ),
));

৩. Material Icon কাস্টমাইজেশন

আপনি চাইলে Material Icons কাস্টমাইজ করতে পারেন বা নিজের আইকন ব্যবহার করতে পারেন। Material Icons ব্যবহারের জন্য আপনি HTML ফাইলে এটি যোগ করতে পারেন:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Angular Material এর কাস্টম থিমিং সিস্টেম একটি শক্তিশালী টুল, যা আপনার অ্যাপ্লিকেশনের ডিজাইনকে সহজেই কাস্টমাইজ এবং ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ করে তোলে। এটি মূলত রঙের প্যালেট, টাইপোগ্রাফি এবং অন্যান্য ডিজাইন উপাদান কাস্টমাইজ করতে সাহায্য করে। SCSS ফাইল ব্যবহার করে কাস্টম থিম তৈরি করা খুবই সহজ এবং ডেভেলপারদের দ্রুত ডিজাইন পরিবর্তন করার সুবিধা প্রদান করে।

Angular Material এ ডার্ক থিম ব্যবহার করার মাধ্যমে আপনার অ্যাপ্লিকেশনের UI ডিজাইনকে একটি আধুনিক এবং কম্প্যাক্ট লুক দেওয়া যায়। ডার্ক থিম বিশেষভাবে রাতে বা কম আলোতে ব্যবহারকারীদের জন্য সুবিধাজনক। এটি সাধারণত চোখের উপর চাপ কমায় এবং অ্যাপ্লিকেশনের ডিজাইনে একটি প্রফেশনাল টাচ যোগ করে।

Angular Material ডিফল্টভাবে light theme ব্যবহার করে, তবে আপনি dark theme কাস্টমাইজ করে বা পূর্বনির্ধারিত ডার্ক থিম ব্যবহার করে অ্যাপ্লিকেশনে অ্যাপ্লাই করতে পারেন।

ডার্ক থিম কাস্টমাইজ করা

১. SCSS ফাইলে ডার্ক থিম তৈরি

Angular Material এর মধ্যে একটি পূর্বনির্ধারিত ডার্ক থিম ফিচার রয়েছে, যা আপনি কাস্টমাইজ করে ব্যবহার করতে পারেন।

প্রথমে, আপনার SCSS ফাইলে Angular Material Theming ফাংশন ইমপোর্ট করুন:

@import '~@angular/material/theming';

তারপর, আপনি dark theme তৈরি করতে পারেন। ডার্ক থিম তৈরি করার জন্য mat-dark-theme মিক্সইন ব্যবহার করতে হয়।

// রঙের প্যালেট
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink);
$warn: mat-palette($mat-red);

// ডার্ক থিম তৈরি
$dark-theme: mat-dark-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));

// থিম অ্যাপ্লাই করা
@include angular-material-theme($dark-theme);

২. SCSS ফাইলে কাস্টম ডার্ক থিম তৈরি

আপনি যদি আপনার নিজের পছন্দমতো রঙ কাস্টমাইজ করতে চান, তাহলে SCSS ফাইলে কাস্টম রঙ ব্যবহার করে ডার্ক থিম তৈরি করতে পারেন।

// কাস্টম রঙের প্যালেট
$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-orange);
$warn: mat-palette($mat-deep-orange);

// ডার্ক থিম তৈরি
$custom-dark-theme: mat-dark-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));

// থিম অ্যাপ্লাই করা
@include angular-material-theme($custom-dark-theme);

৩. angular.json ফাইলে SCSS ফাইল যোগ করা

এখন SCSS ফাইলটি angular.json ফাইলে যুক্ত করতে হবে, যাতে থিমটি অ্যাপ্লিকেশনে সঠিকভাবে অ্যাপ্লাই হয়।

"styles": [
  "src/styles.scss"
]

ডার্ক থিম প্রয়োগ করা

১. থিমের জন্য ক্লাস যুক্ত করা

ডার্ক থিমটি সক্রিয় করার জন্য আপনার HTML বা body ট্যাগে একটি ক্লাস যোগ করতে পারেন। এরপর CSS বা SCSS ব্যবহার করে সেই ক্লাসের মাধ্যমে থিম পরিবর্তন করতে পারেন।

<body class="dark-theme">
  <!-- অ্যাপ্লিকেশনের কন্টেন্ট -->
</body>

২. ডাইনামিক থিম পরিবর্তন

আপনি চাইলে অ্যাপ্লিকেশনের থিম ডাইনামিকভাবে পরিবর্তন করতে পারেন। এটি করতে হলে আপনি localStorage অথবা sessionStorage ব্যবহার করতে পারেন এবং ইউজারের পছন্দ অনুযায়ী থিম পরিবর্তন করতে পারেন।

if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark-theme');
} else {
  document.body.classList.remove('dark-theme');
}

এছাড়া, আপনি একটি টগল বাটন তৈরি করে সেটি দিয়ে থিম পরিবর্তনও করতে পারেন।

৩. ডার্ক থিম CSS ক্লাস ব্যবহার

আপনার HTML ফাইলে ডার্ক থিম ক্লাস ব্যবহার করুন, যা আপনার অ্যাপ্লিকেশনের সমস্ত এলিমেন্টে প্রভাব ফেলবে।

<body class="dark-theme">
  <app-root></app-root>
</body>

SCSS ফাইলে সেই ক্লাসের জন্য স্টাইল নির্ধারণ করুন:

.dark-theme {
  // এখানে ডার্ক থিমের রঙ এবং অন্যান্য স্টাইল কাস্টমাইজ করুন
  background-color: #121212;
  color: white;
}

ডার্ক থিমের সুবিধা

• চোখের উপর কম চাপ: ডার্ক থিম ব্যবহারকারীদের চোখের উপর কম চাপ তৈরি করে, বিশেষত রাতে বা কম আলোতে।
• ব্যাটারি সাশ্রয়ী: মোবাইল ডিভাইসে OLED স্ক্রীনে ডার্ক থিম ব্যাটারি সাশ্রয় করতে সাহায্য করে।
• আধুনিক এবং প্রফেশনাল লুক: ডার্ক থিম সাধারণত আধুনিক এবং প্রফেশনাল ডিজাইনের জন্য আদর্শ, যা অনেক ব্যবহারকারী পছন্দ করেন।

Angular Material এর ডার্ক থিম ব্যবহার করা সহজ এবং এটি অ্যাপ্লিকেশনের ডিজাইনে একটি নতুন দৃষ্টিকোণ নিয়ে আসে। আপনি কাস্টম SCSS ফাইলের মাধ্যমে ডার্ক থিম কাস্টমাইজ করে আপনার অ্যাপ্লিকেশনের ব্র্যান্ডিং অনুযায়ী ডিজাইন পরিবর্তন করতে পারেন। ডার্ক থিম একটি জনপ্রিয় ট্রেন্ড এবং ব্যবহারকারীদের জন্য আরও সুবিধাজনক হতে পারে, বিশেষত রাতে বা কম আলোতে।

Angular Material এ থিম প্যালেট ব্যবহার করা একটি গুরুত্বপূর্ণ ফিচার, যা আপনার অ্যাপ্লিকেশনের UI ডিজাইনে রঙের সামঞ্জস্য বজায় রাখে। থিম প্যালেট আপনাকে প্রধান (primary), একসেন্ট (accent), এবং সতর্ক (warn) রঙ নির্ধারণ করতে সহায়তা করে, যা অ্যাঙ্গুলার ম্যাটেরিয়াল কম্পোনেন্টগুলির ডিজাইনকে কাস্টমাইজ করে।

Angular Material এর থিম সিস্টেম আপনাকে রঙের প্যালেট তৈরি, কাস্টমাইজ এবং প্রয়োগ করার সুযোগ দেয়, যা আপনার অ্যাপ্লিকেশনকে সুন্দর এবং ইউনিফর্ম ডিজাইন দেয়।

থিম প্যালেটের মূল উপাদান

1. Primary Palette: এটি অ্যাপ্লিকেশনের প্রধান রং, যা সাধারণত বাটন, টুলবার, লিংক ইত্যাদিতে ব্যবহৃত হয়।
2. Accent Palette: এটি অ্যাপ্লিকেশনের হাইলাইট রং, যেমন স্লাইডার, টগল বাটন, এবং নির্বাচিত উপাদান।
3. Warn Palette: এটি ত্রুটি বা সতর্কীকরণের জন্য ব্যবহৃত রং, সাধারণত লাল (red) রঙের হয়ে থাকে।
4. Background Palette: এটি অ্যাপ্লিকেশনের ব্যাকগ্রাউন্ড রং নির্ধারণ করে।

থিম প্যালেট তৈরি ও কাস্টমাইজ করা

Angular Material এ থিম প্যালেট তৈরি এবং কাস্টমাইজ করতে আপনি SCSS ফাইল ব্যবহার করবেন। এটি থিম কাস্টমাইজেশন প্রক্রিয়াকে সহজ এবং দ্রুত করে তোলে।

১. থিম প্যালেট তৈরি করা

আপনি mat-palette ফাংশন ব্যবহার করে রঙের প্যালেট তৈরি করতে পারেন। এটি Angular Material এর মধ্যে থাকা পূর্বনির্ধারিত রঙের প্যালেট ব্যবহার করে তৈরি করা হয়। এর মাধ্যমে আপনি প্রধান (primary), একসেন্ট (accent), এবং সতর্ক (warn) রঙ কাস্টমাইজ করতে পারবেন।

// Primary, Accent এবং Warn রঙের প্যালেট তৈরি
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink);
$warn: mat-palette($mat-red);

এখানে, $mat-indigo, $mat-pink, এবং $mat-red হলো Angular Material এর পূর্বনির্ধারিত রঙের প্যালেট। আপনি চাইলে এই রঙগুলোর মান পরিবর্তন করতে পারেন অথবা নিজের পছন্দ অনুযায়ী নতুন রঙ সংজ্ঞায়িত করতে পারেন।

২. কাস্টম থিম তৈরি করা

আপনি তৈরি করা প্যালেট ব্যবহার করে light theme বা dark theme তৈরি করতে পারেন।

// কাস্টম থিম তৈরি
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));

// থিম অ্যাপ্লাই করা
@include angular-material-theme($theme);

আপনি চাইলে ডার্ক থিম তৈরি করতে পারেন:

// ডার্ক থিম তৈরি
$dark-theme: mat-dark-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));

// থিম অ্যাপ্লাই করা
@include angular-material-theme($dark-theme);

৩. রঙের প্যালেট কাস্টমাইজ করা

Angular Material এ আপনি আপনার পছন্দ অনুযায়ী রঙের প্যালেট কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি যদি একটি নতুন রঙের প্যালেট তৈরি করতে চান, তাহলে নিচের মতো করতে পারেন:

// কাস্টম প্যালেট তৈরি
$custom-primary: mat-palette($mat-teal);
$custom-accent: mat-palette($mat-amber);

// কাস্টম থিম তৈরি
$custom-theme: mat-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
  ),
));

// থিম অ্যাপ্লাই করা
@include angular-material-theme($custom-theme);

থিম প্যালেটের ব্যবহার

১. থিমের জন্য CSS ক্লাস ব্যবহার করা

আপনার অ্যাপ্লিকেশনের HTML এ ক্লাস ব্যবহার করে আপনি থিম প্রয়োগ করতে পারেন। উদাহরণস্বরূপ:

<body class="custom-theme">
  <app-root></app-root>
</body>

এখন SCSS ফাইলে custom-theme ক্লাসের জন্য স্টাইল কাস্টমাইজ করতে পারেন।

.custom-theme {
  background-color: #ffffff;
  color: #333;
  // আরও কাস্টম স্টাইল
}

২. SCSS ফাইলে কাস্টম প্যালেট যুক্ত করা

আপনি চাইলে নতুন রঙের প্যালেট তৈরি করে তা আপনার অ্যাপ্লিকেশনে যুক্ত করতে পারেন। উদাহরণস্বরূপ:

// নতুন রঙের প্যালেট
$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-orange);
$warn: mat-palette($mat-deep-orange);

// থিম তৈরি এবং অ্যাপ্লাই
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  ),
));

@include angular-material-theme($theme);

Angular Material এ থিম প্যালেট ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের ডিজাইন কাস্টমাইজ করতে পারেন। mat-palette ফাংশন এবং SCSS ফাইলের মাধ্যমে রঙের প্যালেট তৈরি ও কাস্টমাইজ করা সহজ এবং দ্রুত। আপনি চাইলে পূর্বনির্ধারিত রঙের প্যালেট ব্যবহার করতে পারেন বা নিজে নতুন রঙ সংজ্ঞায়িত করতে পারেন। Angular Material এর থিম প্যালেট সিস্টেম ব্যবহার করে আপনার অ্যাপ্লিকেশনকে আরও সুন্দর, ইউনিফর্ম এবং আধুনিক ডিজাইন করতে পারবেন।